import { FC, useMemo } from 'react'
import { Layout, Menu } from "antd";
//import { useState } from "react";
// import {
//     UploadOutlined,
//     UserOutlined,
//     VideoCameraOutlined,
// } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import { RootState } from "@/store"
import { useLocation, useNavigate } from 'react-router-dom';

interface IProps {
    collapsed: boolean;
}

const Sider: FC<IProps> = ({ collapsed }) => {
    const menuItems = useSelector((state: RootState) => state.user.menuItems)
    //const [collapsed] = useState(false);
    const { pathname } = useLocation()
    const defaultOpenKeys = useMemo(() => {
        const arr = pathname.split('/').splice(1)
        return arr.reduce((result: string[], item, index) => {
            const tmp = index === 0 ? `/${item}` : `${result[index - 1]}/${item}`
            result.push(tmp);
            return result;
        }, [])
    }, [pathname])

    const navigate = useNavigate();
    function onClick({ key }: any) {

        navigate(key);
        //console.log(key)
    }
    return (
        <Layout.Sider trigger={null} collapsible collapsed={collapsed}>
            <div className="logo" />
            <Menu
                theme="dark"
                mode="inline"
                defaultOpenKeys={defaultOpenKeys}
                defaultSelectedKeys={[pathname]}
                items={menuItems}
                onClick={onClick}
            />
        </Layout.Sider>
    )
};
export default Sider;